<template>
    <el-card>
        <span style="display: block;font-size: 20px; margin-bottom: 20px;">角色管理
            <span style="margin-left: 80%;">
                <el-button type="primary" style="width: 120px;height:50px;border-radius: 20px;">保存</el-button>
            </span>
        </span>
        <div class="main">
            <el-card shadow="never" style="width:40%; margin-right: 20px;height: 92vh;">
                <span>角色</span>
                <span style="margin-left: 35%;">
                    <el-button link type="primary" @click="addRoles">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        新增角色
                    </el-button>
                </span>
                <el-table :data="getAllRoleList" style="width: 100%">
                    <el-table-column prop="name" label="名称" width="180" />
                    <el-table-column prop="address" label="操作">
                        <template #default="{ row }">
                            <el-icon>
                                <Edit @click="editRole(row)" />
                            </el-icon>
                            <el-icon>
                                <Delete @click="deleteRole(row.id)" />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card title="管理角色权限" shadow="never" style="width:75%;">
                <el-form :data="getAllRoleList">
                    <el-form-item>
                        <el-checkbox>全部</el-checkbox>
                    </el-form-item>
                    <template v-for="item in  getAllRoleList " :key="item.id">
                        <el-form-item>
                            <el-checkbox>{{ item.name }}</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox>查看待处理签约</el-checkbox>
                            <el-checkbox>编辑待处理签约</el-checkbox>
                            <el-checkbox>删除待处理签约</el-checkbox>
                            <el-checkbox>导出待处理签约</el-checkbox>
                        </el-form-item>
                    </template>
                </el-form>
            </el-card>
        </div>
        <el-dialog v-model="roleDialogVisible" :title="title" width="40%" center>
            <span>
                <el-form :data="roleList" :model='roleList' label-width="70px">
                    <el-form-item label="角色名称">
                        <el-input v-model="roleList.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="角色介绍">
                        <el-input v-model="roleList.description" style="height: 100px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="roleList.createTime" label="创建时间">
                        <el-text size="large">{{ roleList.createTime }}</el-text>
                    </el-form-item>
                    <el-form-item label="创建人">
                        <el-text size="large">{{ createName }}</el-text>
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelDialog">取消</el-button>
                    <el-button type="primary" @click="submitDialog">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script lang='ts' setup>
import { onMounted, ref, markRaw, reactive } from 'vue'
import api from '@/api'
import { ElMessageBox, ElMessage } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import { saveRoleType } from '@/types/ccc/roles'
const getAllRoleList = ref()
const roleDialogVisible = ref<boolean>(false)
const getAllRoleData = async () => {
    const result = await api.systemSetting.role.getAllRoleApi()
    console.log(result.data.data);
    getAllRoleList.value = result.data.data
}
onMounted(() => {
    getAllRoleData()
})
const roleList = reactive<saveRoleType>({
    name: '',   //姓名
    description: '',//描述	
    creatorId: '', //创建者登录id
    createTime: '',
})
const title = ref<string>('')
const createName = ref<string>('')

// 据登录者id查找创建人
const getChcsRole = async (id: string) => {
    const result = await api.systemSetting.role.getUmRoleApi(id)
    if (result.data.code === 200) {
        createName.value = result.data.data.name
    } else {
        ElMessage.warning(result.data.msg)
    }

}
// 新增角色
const addRoles = () => {
    title.value = '新增角色'
    roleDialogVisible.value = true
    roleList.creatorId = localStorage.getItem('id')
    if (roleList.creatorId) {
        getChcsRole(roleList.creatorId)
    }
    roleList.createTime =''
    roleList.name = ''
    roleList.description = ''
}
// 编辑角色
const editRole = async (item: saveRoleType) => {
    title.value = '编辑角色'
    roleDialogVisible.value = true
    console.log(item);
    roleList.name = item.name
    roleList.description = item.description
    roleList.createTime = item.createTime
    roleList.id = item.id
    roleList.creatorId = item.creatorId
    if (roleList.creatorId) {
        getChcsRole(roleList.creatorId)
    }
}
// 删除角色
const deleteRole = (id: string) => {
    ElMessageBox.confirm(
        '删除后无法恢复，确定要删除此条角色吗？',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            icon: markRaw(QuestionFilled)
        }
    )
        .then(async () => {
            const result = await api.systemSetting.role.delRoleApi(id)
            console.log(result)
            if (result.data.code === 200) {
                ElMessage.success(result.data.msg)
            } else {
                ElMessage.warning(result.data.msg)
            }
            getAllRoleData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
const cancelDialog = () => {
    roleDialogVisible.value = false
}
// 提交对话框
const submitDialog = async () => {
    roleDialogVisible.value = false
    if (title.value === '新增角色') {
        console.log(roleList);
        const result = await api.systemSetting.role.saveRoleApi(roleList)
        if (result.data.code === 200) {
            ElMessage.success(result.data.msg)
        } else {
            ElMessage.warning(result.data.msg)
        }
    } else if (title.value == '编辑角色') {
        console.log(roleList);
        const result = await api.systemSetting.role.updateRole(roleList)
        if (result.data.code === 200) {
            ElMessage.success(result.data.msg)
        } else {
            ElMessage.warning(result.data.msg)
        }
    }
    getAllRoleData()
}
// const allSelect = () => {
    
// }
</script>

<style lang='scss' scoped>
.main {
    @include flex(center, start, row)
}
</style>